<template>
  <div class="good-book-share">
    <titleBar title="好书推荐" :learnMore="true"></titleBar>
    <div class="good-book-content">
      <router-link :to="{path: `/book/${item.id}`}" class="good-book-item" v-for="item in data" :key="item.id">
        <div class="img">
          <img :src="item.img" :alt="item.title">
        </div>
        <div class="title">
          {{ item.title }}
        </div>
        <div class="author">{{ item.author }} 著</div>
        <div class="price">￥{{ item.price }} <span>起</span></div>
      </router-link>
    </div>
  </div>
</template>

<script>
import titleBar from '@/bookComponents/title/index'
export default {
  name: 'goodBookShare',
  components: {
    titleBar
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
  .good-book-content {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-row-gap: 15px;
    grid-column-gap: 10px;
    margin-top: 15px;
    .good-book-item {
      width: 100%;
      text-decoration: none;
      color: #000000;
      &:hover {
        .title {
          color: #8C222C;
        }
        .price {
          color: #8C222C;
        }
      }
      .img {
        height: 150px;
        overflow: hidden;
        text-align: center;
        padding: 10px;
        img { height: 100%; }
      }
      .title {
        margin: 0px 10px;
        padding: 5px 0;
        font-size: 12px;
      }
      .author {
        margin: 0 10px;
        line-height: 20px;
        font-size: 12px;
        color: #707070;
      }
      .price {
        color: #b57c34;
        line-height: 40px;
        padding: 0 10px;
        span {
          color: #707070;
          font-size: 12px;
        }
      }
    }
  }
</style>
